<script setup>
    import { ref, computed } from 'vue'
    const props = defineProps({
        // 数据数组
        dataList: {
            type: Array,
            default: () => []
        },
        // 转动方向 normal / reverse
        direction: {
            type: String,
            default: 'normal'
        },
        // 每张图持续时间  单位: 秒
        duration: {
            type: Number,
            default: 4
        }
    })


    const mainData = ref(null);
    const copyData = ref(null);
    
    // 暂停动画
    const pauseAnimate = () => {
        mainData.value.style.animationPlayState = "paused"
        copyData.value.style.animationPlayState = "paused"
    }

    // 继续动画
    const reStartAnimate = () => {
        mainData.value.style.animationPlayState = ""
        copyData.value.style.animationPlayState = ""
    }

    // 动画样式
    const animationStyle = computed(()=>{
        return `animation-name:${ props.direction == 'normal' ? 'normalScroll' : 'reverseScroll' };animation-duration: ${ props.dataList.length * props.duration}s;`
    })
</script>

<template>
    <div class="maqueeLine">
        <div class="maqueeInner" @mouseenter="pauseAnimate"  @mouseleave="reStartAnimate">
            <div class="maqueeSwiper" :style="animationStyle" ref="mainData">
                <div class="marqueeBox" v-for="item of dataList" :key="item.id">
                    <img class="marqueeImg" :src="item.img" alt="">
                </div>
            </div>
            <div class="maqueeSwiper dataCopy" :style="animationStyle" ref="copyData">
                <div class="marqueeBox" v-for="item of dataList" :key="item.id">
                    <img class="marqueeImg" :src="item.img" alt="">
                </div>
            </div>
        </div>      
    </div>
</template>

<style>
/* 正向动画 */
/* 向左 */
@keyframes normalScroll {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

/* 反向动画 */
/* 向右 */
@keyframes reverseScroll {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}
</style>

<style scoped>

.maqueeLine {
    padding: 0 80px;
    width: 100%;
}

.maqueeInner {
    width: 100%;
    display: flex;
    overflow: hidden;
}

.maqueeSwiper {
    display: flex;
    /* animation: reverseScroll 10s linear infinite; */
    /* animation-name: reverseScroll; */
    /* animation-duration: 30s; */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.marqueeBox {
    margin: 8px;
    background-color: hsla(0, 0%, 100%, .1);
    border-radius: 6px;
}
.marqueeImg {
    width: 200px;
    height: 80px;
}
</style>